import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/common/app_spaces.dart';
import 'package:finance_app/src/entities/chat_room_message_entity.dart';
import 'package:finance_app/src/page/tutorial/tutorial_left_chat_item.dart';
import 'package:finance_app/src/utils/date_time_utils.dart';
import 'package:finance_app/src/widgets/common_app_bar.dart';
import 'package:finance_app/src/widgets/pop/icon_follow_menu.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:finance_app/generated/a.dart';

class TutorialAssistantPage extends StatefulWidget {
  const TutorialAssistantPage({Key key}) : super(key: key);

  @override
  _TutorialAssistantPageState createState() => _TutorialAssistantPageState();
}

class _TutorialAssistantPageState extends State<TutorialAssistantPage> {
  List<ChatRoomMessageEntity> messages = [];
  List<ChatRoomMessageGroupEntity> chatGroups = [];

  @override
  void initState() {
    super.initState();
    messages = [
      ChatRoomMessageEntity().fromJson({
        "data_type": "chat_room_message",
        "type": "text",
        "content": "Hello! How can I help you today?",
        "actions": [],
        "avatar": "http://dev.acesoft.com.sg/images/chats/assistant.jpg",
        "name": null,
        "created_at": "2021-07-23 13:51:40",
        "updated_at": "2021-07-23 13:51:40"
      }),
      ChatRoomMessageEntity().fromJson({
        "data_type": "chat_room_message",
        "type": "text",
        "content": "You can enter your request or pick from the list below",
        "actions": [
          {
            "data": {"reply_text": "Record Transaction"},
            "text": "Record Transaction",
            "type": "reply"
          },
          {
            "data": {"reply_text": "Add Product / Service"},
            "text": "Add Product / Service",
            "type": "reply"
          },
          {
            "data": {
              "data": [],
              "goto": "account_new",
              "type": "page",
              "goto_id": null
            },
            "text": "Add Bank Account",
            "type": "deep_link"
          },
          {
            "data": {"reply_text": "Add Employee"},
            "text": "Add Employee",
            "type": "reply"
          },
          {
            "data": {"reply_text": "Others"},
            "text": "Others",
            "type": "reply"
          }
        ],
        "created_at": "2021-07-23 13:51:40",
        "updated_at": "2021-07-23 13:51:40"
      })
    ];
    chatGroups = ChatRoomMessageGroupEntity.formatMessage(messages);
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Material(
          child: Stack(
            children: [
              Scaffold(
                appBar: getDefaultAppBar(
                  titleWidget: Text(S.current.ace_virtual_assistant),
                ),
                body: Stack(
                  children: [
                    AnimatedPositioned(
                      duration: Duration(milliseconds: 200),
                      left: 0,
                      right: 0,
                      bottom: 0,
                      child: _buildInputBox(),
                    ),
                  ],
                ),
              ),
              Container(
                color: Color.fromRGBO(118, 118, 118, 0.8),
              ),
              Positioned(
                top: 65,
                child: SafeArea(
                  child: Container(
                    constraints: BoxConstraints(maxWidth: 400),
                    child: Column(
                      children: [
                        AbsorbPointer(
                          child: ListView.builder(
                            padding: const EdgeInsets.only(bottom: 8.0),
                            itemCount: chatGroups.length,
                            shrinkWrap: true,
                            itemBuilder: (context, i) {
                              ChatRoomMessageGroupEntity chat = chatGroups[i];
                              return _buildItems(chat);
                            },
                          ),
                        ),
                        buildTurialInfo(),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildInputBox() => Container(
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                top: BorderSide(
              color: aceWhiteGreyColor,
              width: getDp(6),
            ))),
        height: getDp(62),
        alignment: Alignment.centerLeft,
        child: Row(
          children: [
            IconFollowMenu(
              onSelect: null,
              padding: EdgeInsets.symmetric(
                horizontal: getDp(25),
                vertical: getDp(22),
              ),
              child: SvgPicture.asset(
                A.assetsImagesStyleBlueAdd,
                width: getDp(18),
                height: getDp(18),
                fit: BoxFit.contain,
              ),
            ),
            Expanded(
              child: TextFormField(
                textInputAction: TextInputAction.send,
                decoration: InputDecoration(
                    border: InputBorder.none,
                    fillColor: Colors.white,
                    contentPadding:
                        EdgeInsets.only(bottom: getDp(20), top: getDp(14)),
                    filled: true,
                    hintText: S.current.type_your_message_here,
                    hintStyle: TextStyle(
                      color: aceDarkGrayColor70,
                      fontSize: getSp(16),
                      fontWeight: FontWeight.w400,
                      height: 22 / 16,
                    )),
              ),
            ),
            PressedOpacityButton(
              onPressed: () {},
              padding: EdgeInsets.symmetric(
                horizontal: getDp(25),
                vertical: getDp(21),
              ),
              child: SvgPicture.asset(
                A.assetsImagesStyleVoice,
                width: getDp(18),
                height: getDp(20),
                fit: BoxFit.contain,
              ),
            ),
          ],
        ),
      );

  Widget _buildItems(ChatRoomMessageGroupEntity value) {
    return TutorialLeftChatItem(
      avatar: "http://dev.acesoft.com.sg/images/chats/assistant.jpg",
      contents: value.messages,
      time: DateTimeUtils.formatDateTimeChatRoom(value.createdAt),
    );
  }

  Widget buildTurialInfo() {
    return Transform.translate(
      offset: Offset(0, -30),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          buildArrow(A.assetsImagesTutorialArrowChat),
          Text(
            S.current
                .have_something_you_need_help_with_our_assistant_is_here_to_guide_you,
            textAlign: TextAlign.center,
            style: TextStyle(fontWeight: FontWeight.w700, color: Colors.white),
          ),
          AppSpaces.h10,
          ElevatedButton(
              style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(aceBlueColor)),
              onPressed: null,
              child: Text(
                S.current.next,
                style: TextStyle(color: Colors.white),
              )),
        ],
      ),
    );
  }

  Widget buildArrow(String imagePath) {
    return SvgPicture.asset(
      imagePath,
      width: getDp(55),
      height: getDp(55),
    );
  }
}
